<template>
  <div>
    <el-dialog
      :title="curid == '' ? '角色添加' : '角色修改'"
      :visible.sync="obj.isshow"
    >
      <el-form :model="form">
        <el-form-item label="菜单名称" :label-width="formLabelWidth">
          <el-input v-model="form.rolename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色权限" :label-width="formLabelWidth">
          <el-tree
            ref="tree"
            :data="data"
            show-checkbox
            node-key="id"
            :default-expand-all="true"
            :default-expanded-keys="[]"
            :default-checked-keys="[]"
            :props="defaultProps"
          >
          </el-tree>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <!-- 
            active-value: switch启用时的值
            inactive-value: switch禁用时的值
          -->
          <el-switch
            :active-value="1"
            :inactive-value="2"
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="obj.isshow = false">取 消</el-button>
        <el-button type="primary" v-if="curid == ''" @click="addRole"
          >确 定</el-button
        >
        <el-button type="primary" v-else @click="modifymenu">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { successMsg, failedMsg } from "../../tools/tools.js";
import { roleAdd, getMenuAll, roleInfo, roleEdit } from "../../request/api.js";
export default {
  props: ["obj"],
  data() {
    return {
      curid: "",
      form: {
        rolename: "",
        status: 1,
      },
      formLabelWidth: "120px",
      data: [],
      defaultProps: {
        children: "children",
        label: "title",
      },
    };
  },
  methods: {
    modifymenu() {
      //修改角色
      let obj = {
        id: this.curid,
        ...this.form,
      };
      console.log(obj);
      roleEdit(obj)
        .then((d) => {
          if (d.data.code == 200) {
            successMsg("修改成功");
            this.empty();
            this.$emit("roleaddrefls"); //给父组件绑定事件 重新加载页面数据
          }else{
            failedMsg(d.data.msg);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getInfo(id) {
      this.curid = id;
      console.log(id, 999);
      //根据list页面传过来的id查询要修改的信息并且渲染到页面上
      roleInfo({ id })
        .then((d) => {
          this.form = d.data.list;
          let arr = d.data.list ? d.data.list.menus : [];
          this.$refs.tree.setCheckedKeys(JSON.parse(arr));
        })
        .catch((e) => {
          console.log(e);
        });
    },
    addRole() {
      //添加角色信息
      this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKeys());
      // console.log(this.form);
      roleAdd(this.form)
        .then((d) => {
          console.log(d,88888);
          if (d.data.code == 200) {
            successMsg("添加成功！");
            this.empty();
            this.$emit("roleaddrefls");
          } else {
            failedMsg(d.data.msg);
          }
        })
        .catch((e) => {});
    },
    empty() {
      //重置
      this.form = {
        rolename: "",
        status: 1,
      };
      this.$refs.tree.setCheckedKeys([]);
    },
  },
  mounted() {
    getMenuAll() //获取所有菜单信息
      .then((d) => {
        if (d.data.code == 200) {
          this.data = d.data.list;
        }
        // console.log(d);
      })
      .catch((e) => {
        console.log(e);
      });
  },
};
</script>

<style>
</style>